<template>
  <div>
    <div class="top color-f" :style="bgImg">
      <div class="text-c font17">测试卡系统</div>
      <div class="headinfo" @click="toLogout">
        <img :src="user.photo" class="head" />
        <div class="info">
          <div class="display-ib vertical-a-t wh">
            <div class="mt7">
              <div class="font17 display-ib">{{ user.nickname || "" }}</div>
              <div class="font13 op6 display-ib ml5">
                {{ user.belongOrgName || "" }} /
                {{ user.belongDepartmentName || "" }}
              </div>
            </div>
            <div class="font16 op8 mt7">{{ user.preferredMobileI || "" }}</div>
          </div>
          <div class="display-ib vertical-a-t font16 lh56">
            <i class="iconfont icon-gengduo color-f font14"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="mt140">
      <div v-for="item in menulist" :key="item.index">
        <div class="navtitle">{{ item.description }}</div>
        <div class="skip" v-for="item2 in item.childList" :key="item2.id">
          <router-link :to="item2.tourl">
            <!-- <router-link :to="{ item2.tourl }"> -->
            <div class="left text-c display-ib">
              <i
                class="iconfont color-theme font22"
                :class="item2.iconfont"
              ></i>
            </div>
            <div class="right display-ib vertical-a-t">
              <span class="font14 color-2">{{ item2.description }}</span>
              <i class="iconfont icon-gengduo color-c fr"></i>
              <!-- <span v-if="item2.num && item2.num>0" class="font16 color-8 fr" style="margin-right:8px;">{{item2.num}}</span> -->
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const url = require("@/assets/images/banner.png");

import { Notify } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "home",
  computed: {
    ...mapGetters(["user", "menus"]),
  },
  data() {
    return {
      bgImg: {
        backgroundImage: "url(" + url + ")",
        backgroundSize: "100% 100%",
      },
      menulist: [
        {
          description: "我的工作",
          childList: [
            {
              description: "我的待办",
              iconfont: "icon-todo",
              tourl: "newtodo",
            },
            {
              description: "我的已办",
              iconfont: "icon-do",
              tourl: "process/processJoin",
            },
            {
              description: "我的草稿",
              iconfont: "icon-toread",
              tourl: "process/processDraft",
            },
          ],
        },
        {
          description: "起草",
          childList: [
            {
              description: "车辆维修申请",
              iconfont: "icon-equiplist",
              tourl: "applyCar",
            },
            {
              description: "房屋维修申请",
              iconfont: "icon-equiplist",
              tourl: "applyHouse",
            },
            {
              description: "空调维修申请",
              iconfont: "icon-equiplist",
              tourl: "applyKt",
            },
          ],
        },
      ],
      // menulist: [],
    };
  },
  created() {
    // this.getInfo();
    document.title = this.$route.meta.title + "-" + process.env.VUE_APP_APPNAME;
    this.maipBridge.networkInfo(1, 2, 3, 4);
  },
  methods: {
    getInfo() {
      if (this.user.authPermissions && this.user.authPermissions.length > 0) {
        if (this.user.authPermissions && this.user.authPermissions.length > 0) {
          for (var i in this.user.authPermissions) {
            if (this.user.authPermissions[i].menuLevel == 2) {
              this.user.authPermissions[i].childList = [];
              this.menulist.push(this.user.authPermissions[i]);
              this.menulist.sort(function (a, b) {
                return a.displayOrder - b.displayOrder;
              });
            }
          }
          for (var i in this.menulist) {
            for (var j in this.user.authPermissions) {
              if (this.user.authPermissions[j].type == "访问路径") {
                if (
                  this.user.authPermissions[j].parentId == this.menulist[i].id
                ) {
                  var str = this.user.authPermissions[j].url.substring(5);
                  this.user.authPermissions[j].tourl = str.substring(
                    0,
                    str.length - 5
                  );
                  this.menulist[i].childList.push(this.user.authPermissions[j]);
                  this.menulist[i].childList.sort(function (a, b) {
                    return a.displayOrder - b.displayOrder;
                  });
                }
              }
            }
          }
        }
      }
      this.menulist = [...this.menulist];
    },

    toLogout() {
      this.$router.push({ name: "set" });
    },
  },
};
</script>
<style scoped>
.font13 {
  font-size: 13px;
}
.font17 {
  font-size: 17px;
}
.top {
  width: 100%;
  height: 140px;
  padding: 13px 20px 10px 16px;
  position: fixed;
  top: 0;
}
.headinfo {
  width: 100%;
  margin-top: 29px;
}
.head {
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  vertical-align: top;
  display: inline-block;
}
.info {
  display: inline-block;
  width: calc(100% - 73px);
  height: 56px;
  vertical-align: top;
  margin-left: 16px;
}
.navtitle {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding-left: 20px;
  color: #888;
  background: #f7f7f7;
  font-size: 13px;
}
.skip {
  display: block;
  width: 100%;
  height: 43px;
  line-height: 43px;
}
.left {
  width: 51px;
  height: 43px;
}
.right {
  width: calc(100% - 51px);
  padding-right: 10px;
  height: 43px;
  border-bottom: 1px solid #eee;
}
.wh {
  height: 56px;
  width: 80%;
}
.mt7 {
  margin-top: 7px;
}
.lh56 {
  line-height: 56px;
}
.mt140 {
  padding-top: 140px;
}
</style>